阿嬤都看得懂的 HTML 在幹嘛

If a picture paints a thousand words, Then why can't I paint you? - If, lyrics

昨天我們提到前後端的分別，讓我們稍微回憶看看。呃，好，我知道你阿嬤的記憶力可能沒那麼好，不過應該還算可以記得

• 前端......瀏覽器............
• 後端......伺服器............
  吧!? 忘記也沒關係，現在你阿嬤記得了！

昨天也提到，儘管網頁看起來像是張很長的海報，但是網頁本身並不是張很大的圖片！網頁看起來像圖片，是因為前端工程師對瀏覽器下了文字指令，讓瀏覽器按照這些文字指令，畫出－－沒錯，術語叫作「渲染」出－－這張很長的海報。

在深入介紹渲染的細節以前，讓我們來玩這個遊戲：畫海報版的比手畫腳！小劉先當畫的人，手上有張空白的海報；而我們這些劉姥姥手上有張畫好的海報，嗯，我們就先挑這張好了：

但是我們只能用說話的方式，告訴小劉怎麼畫出這張海報。

我們可能會說：

在畫面左邊有個滑雪的女人，佔了整個海報的一半。
畫面上方 5/8 是藍色的天空。
然後剩下底部的畫面都是白色的，是個滑雪場。
右上角有 6 行白色的文字，第一行是 "Montreal"；
第二、三行是 "Winter Sports"。
剩下三行是日期，分別是 "JAN 19"、"FEB 23"、"1924"。......

讓我們仔細看看上面我們說的這段話，會發現我們很常先跟小劉說說「有」某個東西，再說這個東西大概長怎樣，例如：

在畫面左邊有個滑雪的女人，佔了整個海報的一半。......
右上角有 6 行白色的文字，第一行是 "Montreal"......

更精確地，這句話其實是在說：

有個圖片，這個圖片長得像這樣－－寬大概佔海報的一半，位置在整個海報的左邊，圖片內容是個滑雪的女人。

還有這句話也符合上面的這個格式：

右上角有 6 行白色的文字，第一行是 "Montreal"；

這句話其實是再說：

有個區塊，這個區塊長得像這樣－－位置在整個海報的右上角，內容是 6 行文字，其中有行文字，這行文字長得像這樣－－位置在這個區塊的最上方，文字的顏色是白色，而文字的內容是 "Montreal"。

這句話甚至提到有兩個東西，其中一個包著另一個！

你可能會說，其他幾句話看不出這樣的格式啊！沒關係，讓我們挑幾句來仔細看看：

畫面上方 5/8 是藍色的天空。

仔細想想，這句話是不是其實是在說：

有個區塊，這個區塊長得像這樣－－高度大概是整張海報的 5/8，位置在整個海報的上方，顏色是藍色的。(至於是不是天空，其實這是看的人自己的解讀了。)

呢？

而這句話可能更複雜了：

然後剩下底部的畫面都是白色的，是個滑雪場。

這句話應該是在說：

有個區塊，這個區塊長得像這樣－－高度大概是整張海報的 3/8，位置在整個海報的下方，顏色是白色的。這個區塊中，有張圖片，這張圖片長得像這樣－－它的內容是個滑雪場。

對上述語句分析感興趣的阿嬤可以參考英國哲學家羅素的 On Denoting 這篇文章。

我們在「畫海報版的比手畫腳」這個遊戲當中，告訴小劉怎麼畫出海報的方式，其實就是各位阿嬤變成前端工程師後，告訴瀏覽器怎麼渲染出網頁的方式。我們會先告訴瀏覽器有什麼，然後再告訴瀏覽器這個東西長怎樣。

那麼，你阿嬤會怎麼告訴瀏覽器，底下這張網頁長怎樣呢？

你阿嬤大概會這樣說：

整個網頁有 2 個主要區塊，第一個區塊長得像這樣－－高度大概 8%，底色是白，位置在最上方，這個區塊裡面又有 3 個區塊，其中第一個區塊長得像這樣－－寬度大概是 1/3，位置在最左邊，裡面又有 2 個東西，其中第一個是個圖片，圖片內容是 Facebook 的 Logo............

沒錯，我們都會先告訴瀏覽器在這個網頁上，有哪些東西，像是文字啦、區塊啦、表格啦、按鈕啦......然後再告訴瀏覽器這些東西長怎樣，像是寬度高度、位置、和其他東西的距離、內容、顏色、字體......

當然，我們和瀏覽器溝通的時候，並不是用中文或英文，而是使用特殊的語言。我們會使用 HTML 這個語言告訴瀏覽器，這個網頁中有哪些東西－－或者用蝦趴的術語來說，告訴瀏覽器這個網頁中有哪些「元素」(element)；再使用 CSS 這個語言告訴瀏覽器，這些元素長怎樣－－或者用蝦趴的術語來說，告訴瀏覽器這些元素的「樣式」(style)。

我們會在後面的章節，告訴各位阿嬤 HTML 和 CSS 具體而言怎麼寫。不過，讓我們來做個有趣的實驗。讓我們開啟電腦，使用 Chrome 這個瀏覽器，點開蘋果的網頁。

蘋果的網頁以設計精緻著稱，是不是非常美呢？

那麼，我們要開始窺探這位美人的內在秘密了。

讓我們按下 F12，開啟發展者工具 (DevTool)。在這裡，我們可以看見前端工程師告訴瀏覽器怎麼渲染畫面的指令，也就是 HTML 與 CSS 怎麼寫。

左半邊就是發展者工具，在點選上方我畫紅圈的 "Element" 後，底下紅框中的，就是 HTML。目前看不懂是很正常的，我們在後面的章節中，會介紹 HTML 怎麼寫喔！

那麼，我們怎麼知道網頁中的哪個東西，對應到這些 HTML 的哪些段落，或用專業術語說，對應到哪些 HTML 「標籤」呢？很簡單，只要按下左上角的我畫紅圈中的按鈕：

再把滑鼠游標移到網頁的某個元素上，在發展者工具中，就會直接把這個元素對應的 HTML 標籤反白：

怎麼知道這個反白的 HTML 標籤，就是我們指到的那個 "iPhone" 的按鈕呢？很簡單，讓我們刪掉這個 HTML 標籤看看。在那個 HTML 標籤上面按右鍵，再跳出的選單中點選 "Delete element"，就可以刪掉這個 HTML 標籤了。

然後，我們就會發現，網頁中的 "iPhone" 這個按鈕也跟著消失囉！

因此，我們可以發現，HTML 確實是前端工程師告訴瀏覽器，網頁上有什麼元素的語言喔！